<template>
  <div class="register-container">
    <el-form
      class="register-form"
      :model="registerForm"
      ref="registerFormRef"
      :rules="registerRules"
      label-width="80"
      size="large"
    >
      <div class="title-container">
        <h3 class="title">
          <img
            style="width: 40px; height: 40px"
            :src="logo"
          />SunnyFrame自动化测试平台
        </h3>
      </div>

      <el-form-item prop="username" label="用户">
        <el-input
          placeholder="请输入用户名"
          v-model="registerForm.username"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input
          placeholder="请输入密码"
          v-model="registerForm.password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item prop="nickname" label="昵称">
        <el-input
          placeholder="请输入昵称"
          v-model="registerForm.nickname"
        ></el-input>
      </el-form-item>
      <el-form-item prop="dept" label="部门">
        <el-input
          placeholder="请输入所在部门"
          v-model="registerForm.dept"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <div style="width: 100%">
          <el-radio v-model="registerForm.gender" label="男" size="large">
            男</el-radio
          >
          <el-radio v-model="registerForm.gender" label="女" size="large">
            女</el-radio
          >
          <RouterLink to="/login" class="login-link">返回登录</RouterLink>
        </div>
      </el-form-item>

      <el-button class="register-button" type="primary" @click="handleRegister"
        >注册</el-button
      >
    </el-form>
    <div class="copyright">
      <p>
        Copyright © 2019-2023 湖南特斯汀信息科技有限公司
        <a href="https://beian.miit.gov.cn" target="_blank"
          >testingedu.com.cn</a
        >
      </p>
      <p>湘ICP备18014791号 版权所有</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { localStorage } from "@/api/storage";
import { loginApi, registerApi } from "@/api/sunnyuser";
import router from "@/router";
import { User, Lock } from "@element-plus/icons-vue";
import type { RegisterUser } from "@/types/sunnyUser/type";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { ref } from "vue";
import { RouterLink } from "vue-router";
const registerFormRef = ref<FormInstance>();
const registerForm = ref<RegisterUser>({
  username: "",
  password: "",
  nickname: "",
  dept: "",
  gender: "男",
});
const registerRules = ref<FormRules>({
  username: [
    { required: true, message: "请填写用户名！", trigger: "blur" },
    { min: 3, max: 18, message: "用户名长度请控制在3到18位", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请填写密码！", trigger: "blur" },
    { min: 3, max: 18, message: "密码长度请控制在3到18位", trigger: "blur" },
  ],
  nickname: [
    { required: true, message: "请填写昵称", trigger: "blur" },
    { min: 1, max: 36, message: "昵称长度请控制在3到36位", trigger: "blur" },
  ],
});

const logo = ref(new URL("@/assets/img/logo_small.png", import.meta.url).href);

/**
 * 调用登录的接口
 * 完成token的存储
 * 进行页面的跳转
 */
function handleRegister() {
  if (!registerFormRef.value) {
    ElMessage.error("页面错误，请刷新页面重试");
    return;
  }
  registerFormRef.value.validate((valid) => {
    if (valid) {
      registerApi(registerForm.value).then(() => {
        ElMessage.success("注册成功");
        router.push({ name: "login" });
      });
    } else {
      ElMessage.error("请按要求填写用户信息");
    }
  });
}
</script>

<style scoped>
.register-container {
  width: 100vw;
  height: 100vh;
  background-image: url(@/assets/img/sunnyflowers.jpg);
  background-size: 100% 100%;
}

.register-form {
  position: relative;
  width: 520px;
  padding: 160px 35px 0;
  margin: 0 auto;
  overflow: hidden;
}

.register-form :deep(label) {
  color: white;
}

:deep(.el-form-item__label) {
  color: white;
  font-size: 16px;
  margin-right: 20px;
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #ffde5d;
  font-size: medium;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
  border-color: #ffde5d;
  background-color: #ffde5d;
}

.title-container {
  position: relative;
}
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  margin: 0px auto 40px auto;
  text-align: center;
  font-weight: bold;
}

.register-button {
  width: 100%;
}

.tips {
  height: 20px;
  margin-bottom: 20px;
}

.login-link {
  cursor: pointer;
  font-size: 15px;
  color: white;
  float: right;
  text-decoration: none;
}

:deep(.el-input__icon) {
  font-size: 20px;
}

.copyright {
  width: 100%;
  font-size: 13px;
  text-align: center;
  color: white;
}
.copyright a:visited {
  color: white;
}
</style>
